<template>
  <view class="product-inventory">
    <!-- 自定义导航栏 -->
    <cu-custom bgColor="bg-green" :isBack="true">
      <view slot="content" class="nav-title">成品库存</view>
      <view slot="right" class="nav-right" @click="openFilterModal">
        <text class="cuIcon-filter text-white"></text>
        <text class="filter-text">筛选</text>
      </view>
    </cu-custom>

    <!-- 成品库存列表（按客户分组） -->
    <view class="inventory-list">
      <view
        v-for="customer in customerList"
        :key="customer.customerId"
        class="customer-group"
      >
        <!-- 客户信息头部 -->
        <view
          class="customer-header"
          @click="toggleCustomer(customer.customerId)"
          :class="{ expanded: expandedCustomers.includes(customer.customerId) }"
        >
          <view class="customer-info">
            <view class="customer-name">{{ customer.customerName }}</view>
          </view>
          <view
            class="expand-icon"
            :class="{
              rotated: expandedCustomers.includes(customer.customerId),
            }"
          >
            <text class="iconfont icon-arrow-down"></text>
          </view>
        </view>

        <!-- 订单列表 -->
        <view
          v-if="expandedCustomers.includes(customer.customerId)"
          class="order-list"
        >
          <view
            v-for="order in customer.orders"
            :key="order.orderId"
            class="order-item"
          >
            <!-- 订单信息头部 -->
            <view
              class="order-header"
              @click="toggleOrder(order.orderId)"
              :class="{ expanded: expandedOrders.includes(order.orderId) }"
            >
              <view class="order-info">
                <view class="order-no">{{ order.orderNo }}</view>
                <view class="order-details">
                  <text class="project-name">{{
                    order.projectName || "-"
                  }}</text>
                  <text class="product-count"
                    >{{
                      order.products ? order.products.length : 0
                    }}个产品</text
                  >
                </view>
              </view>
              <view
                class="expand-icon"
                :class="{ rotated: expandedOrders.includes(order.orderId) }"
              >
                <text class="iconfont icon-arrow-down"></text>
              </view>
            </view>

            <!-- 产品分组列表 -->
            <view
              v-if="expandedOrders.includes(order.orderId)"
              class="product-groups"
            >
              <view
                v-for="product in order.products"
                :key="`${product.windowSeries}-${product.windowNo}-${product.windowColor}`"
                class="product-group"
              >
                <!-- 产品信息头部 -->
                <view
                  class="product-header"
                  @click="
                    toggleProduct(
                      `${order.orderId}-${product.windowSeries}-${product.windowNo}-${product.windowColor}`
                    )
                  "
                  :class="{
                    expanded: expandedProducts.includes(
                      `${order.orderId}-${product.windowSeries}-${product.windowNo}-${product.windowColor}`
                    ),
                  }"
                >
                  <view class="product-info">
                    <view class="window-info">
                      <text class="window-series">{{
                        product.windowSeries || "-"
                      }}</text>
                      <text class="window-no">{{
                        product.windowNo || "-"
                      }}</text>
                    </view>
                    <view class="product-details">
                      <text class="window-color">{{
                        product.windowColor || "-"
                      }}</text>
                      <text class="location-count"
                        >{{ product.locationCount }}个库位</text
                      >
                    </view>
                  </view>
                  <view class="product-quantity">
                    <text class="quantity-value">{{
                      formatQuantity(product.totalQuantity)
                    }}</text>
                    <text class="quantity-unit">套</text>
                  </view>
                  <view
                    class="expand-icon"
                    :class="{
                      rotated: expandedProducts.includes(
                        `${order.orderId}-${product.windowSeries}-${product.windowNo}-${product.windowColor}`
                      ),
                    }"
                  >
                    <text class="iconfont icon-arrow-down"></text>
                  </view>
                </view>

                <!-- 库位分组列表 -->
                <view
                  v-if="
                    expandedProducts.includes(
                      `${order.orderId}-${product.windowSeries}-${product.windowNo}-${product.windowColor}`
                    )
                  "
                  class="location-groups"
                >
                  <view
                    v-for="location in product.locations"
                    :key="`${location.warehouseId}-${location.locationId}`"
                    class="location-group"
                  >
                    <!-- 库位信息头部 -->
                    <view
                      class="location-header"
                      @click="
                        toggleLocation(
                          `${location.warehouseId}-${location.locationId}`
                        )
                      "
                      :class="{
                        expanded: expandedLocations.includes(
                          `${location.warehouseId}-${location.locationId}`
                        ),
                      }"
                    >
                      <view class="location-info">
                        <view class="warehouse-info">
                          <text class="warehouse-name">{{
                            location.warehouseName || "未知仓库"
                          }}</text>
                          <text class="location-code">{{
                            location.locationName || "无库位"
                          }}</text>
                        </view>
                        <view class="location-stats">
                          <text class="stat-item"
                            >库存{{
                              formatQuantity(location.totalQuantity)
                            }}套</text
                          >
                        </view>
                      </view>
                      <view
                        class="expand-icon"
                        :class="{
                          rotated: expandedLocations.includes(
                            `${location.warehouseId}-${location.locationId}`
                          ),
                        }"
                      >
                        <text class="iconfont icon-arrow-down"></text>
                      </view>
                    </view>

                    <!-- 库存明细列表 -->
                    <view
                      v-if="
                        expandedLocations.includes(
                          `${location.warehouseId}-${location.locationId}`
                        )
                      "
                      class="inventory-items"
                    >
                      <view
                        v-for="item in location.inventoryItems"
                        :key="item.id"
                        class="inventory-item"
                        @click="toggleItem(item.id)"
                      >
                        <view class="item-card">
                          <view class="header-content">
                            <view class="primary-info">
                              <view class="batch-info">
                                <text class="batch-no">{{
                                  item.batchNo || "-"
                                }}</text>
                              </view>
                              <view class="quantity-info">
                                <text class="quantity-label">数量</text>
                                <text class="quantity-value">{{
                                  formatQuantity(item.totalQuantity)
                                }}</text>
                                <text class="quantity-unit">套</text>
                              </view>
                            </view>
                            <view class="secondary-info">
                              <text class="status-text">{{
                                item.statusText
                              }}</text>
                            </view>
                            <view class="expand-toggle">
                              <text class="iconfont icon-arrow-down"></text>
                            </view>
                          </view>
                          <view
                            class="status-indicator"
                            :class="item.statusClass"
                          ></view>
                        </view>

                        <!-- 展开显示区域 -->
                        <view
                          class="item-details"
                          v-if="expandedItems.includes(item.id)"
                        >
                          <view class="detail-grid">
                            <view class="detail-item">
                              <text class="label">批次号</text>
                              <text class="value">{{
                                item.batchNo || "-"
                              }}</text>
                            </view>
                            <view class="detail-item">
                              <text class="label">总数量</text>
                              <text class="value"
                                >{{
                                  formatQuantity(item.totalQuantity)
                                }}套</text
                              >
                            </view>
                            <view class="detail-item">
                              <text class="label">可用数量</text>
                              <text class="value"
                                >{{
                                  formatQuantity(item.availableQuantity)
                                }}套</text
                              >
                            </view>
                            <view class="detail-item">
                              <text class="label">预留数量</text>
                              <text class="value"
                                >{{
                                  formatQuantity(item.reservedQuantity)
                                }}套</text
                              >
                            </view>
                            <view class="detail-item">
                              <text class="label">库存状态</text>
                              <text class="value">{{ item.statusText }}</text>
                            </view>
                            <view class="detail-item">
                              <text class="label">入库日期</text>
                              <text class="value">{{
                                item.inboundDate
                                  ? formatDate(item.inboundDate)
                                  : "-"
                              }}</text>
                            </view>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <view class="load-more" v-if="hasMore" @click="loadMore">
      <text class="load-text">{{ loading ? "加载中..." : "加载更多" }}</text>
    </view>

    <!-- 筛选弹窗 -->
    <view
      class="filter-modal"
      v-if="showFilterModal"
      @click="showFilterModal = false"
    >
      <view class="filter-content" @click.stop>
        <view class="filter-header">
          <text class="filter-title">筛选条件</text>
          <text class="close-btn" @click="showFilterModal = false">×</text>
        </view>
        <view class="filter-body">
          <!-- 模糊查询字段 -->
          <view class="filter-group">
            <text class="group-title">查询条件</text>
            <view class="input-group">
              <view class="input-item">
                <text class="input-label">客户名称</text>
                <input
                  class="filter-input"
                  type="text"
                  placeholder="请输入客户名称"
                  v-model="filterForm.customerName"
                />
              </view>
              <view class="input-item">
                <text class="input-label">客户编码</text>
                <input
                  class="filter-input"
                  type="text"
                  placeholder="请输入客户编码"
                  v-model="filterForm.customerCode"
                />
              </view>
              <view class="input-item">
                <text class="input-label">订单号</text>
                <input
                  class="filter-input"
                  type="text"
                  placeholder="请输入订单号"
                  v-model="filterForm.orderNo"
                />
              </view>
              <view class="input-item">
                <text class="input-label">项目名称</text>
                <input
                  class="filter-input"
                  type="text"
                  placeholder="请输入项目名称"
                  v-model="filterForm.projectName"
                />
              </view>
              <view class="input-item">
                <text class="input-label">门窗系列</text>
                <input
                  class="filter-input"
                  type="text"
                  placeholder="请输入门窗系列"
                  v-model="filterForm.windowSeries"
                />
              </view>
              <view class="input-item">
                <text class="input-label">门窗编号</text>
                <input
                  class="filter-input"
                  type="text"
                  placeholder="请输入门窗编号"
                  v-model="filterForm.windowNo"
                />
              </view>
              <view class="input-item">
                <text class="input-label">仓库名称</text>
                <input
                  class="filter-input"
                  type="text"
                  placeholder="请输入仓库名称"
                  v-model="filterForm.warehouseName"
                />
              </view>
              <view class="input-item">
                <text class="input-label">库位名称</text>
                <input
                  class="filter-input"
                  type="text"
                  placeholder="请输入库位名称"
                  v-model="filterForm.locationName"
                />
              </view>
            </view>
          </view>

          <view class="filter-group">
            <text class="group-title">库存状态</text>
            <view class="checkbox-group">
              <view
                v-for="status in stockStatuses"
                :key="status.value"
                class="checkbox-item"
                :class="{ checked: selectedStatuses.includes(status.value) }"
                @click="toggleStatus(status.value)"
              >
                <text class="checkbox-text">{{ status.label }}</text>
              </view>
            </view>
          </view>

          <view class="filter-group">
            <text class="group-title">其他选项</text>
            <view class="checkbox-group">
              <view
                class="checkbox-item"
                :class="{ checked: filterForm.onlyAvailable }"
                @click="filterForm.onlyAvailable = !filterForm.onlyAvailable"
              >
                <text class="checkbox-text">只显示有库存</text>
              </view>
            </view>
          </view>
        </view>
        <view class="filter-footer">
          <view class="filter-btn reset" @click="resetFilter">重置</view>
          <view class="filter-btn confirm" @click="applyFilter">确定</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "ProductInventory",
  data() {
    return {
      customerList: [],
      expandedCustomers: [], // 展开的客户
      expandedOrders: [], // 展开的订单
      expandedProducts: [], // 展开的产品
      expandedLocations: [], // 展开的库位
      expandedItems: [], // 展开的库存项
      loading: false,
      hasMore: true,
      pageNo: 1,
      pageSize: 20,
      showFilterModal: false,
      selectedStatuses: [],
      filterForm: {
        customerName: "",
        customerCode: "",
        orderNo: "",
        projectName: "",
        windowSeries: "",
        windowNo: "",
        warehouseName: "",
        locationName: "",
        onlyAvailable: false,
      },
      stockStatuses: [
        { value: 1, label: "正常" },
        { value: 2, label: "预留" },
        { value: 3, label: "冻结" },
      ],
    };
  },

  onLoad() {
    this.loadInventoryData();
  },

  onPullDownRefresh() {
    this.refreshData();
  },

  methods: {
    async loadInventoryData(isRefresh = false) {
      if (this.loading) return;

      this.loading = true;

      if (isRefresh) {
        this.pageNo = 1;
        this.customerList = [];
        this.hasMore = true;
      }

      try {
        const params = {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          customerName: this.filterForm.customerName,
          customerCode: this.filterForm.customerCode,
          orderNo: this.filterForm.orderNo,
          projectName: this.filterForm.projectName,
          windowSeries: this.filterForm.windowSeries,
          windowNo: this.filterForm.windowNo,
          warehouseName: this.filterForm.warehouseName,
          locationName: this.filterForm.locationName,
          stockStatuses:
            this.selectedStatuses.length > 0 ? this.selectedStatuses : null,
          onlyAvailable: this.filterForm.onlyAvailable,
        };

        const response = await this.$http.get(
          "/wms/finished-goods/inventory/queryHierarchicalForMobile",
          {
            params: params,
          }
        );

        if (response.data.success) {
          const newData = response.data.result || [];

          // 处理分层数据，为每个库存项添加状态信息
          const processedData = newData.map((customer) => {
            const processedCustomer = {
              ...customer,
              orders:
                customer.orders?.map((order) => {
                  return {
                    ...order,
                    products:
                      order.products?.map((product) => {
                        return {
                          ...product,
                          locations:
                            product.locations?.map((location) => {
                              return {
                                ...location,
                                inventoryItems:
                                  location.inventoryItems?.map((item) => {
                                    return {
                                      ...item,
                                      statusClass:
                                        this.calculateStatusClass(item),
                                      statusText:
                                        this.calculateStatusText(item),
                                    };
                                  }) || [],
                              };
                            }) || [],
                        };
                      }) || [],
                  };
                }) || [],
            };
            return processedCustomer;
          });

          if (isRefresh) {
            this.customerList = processedData;
          } else {
            this.customerList = [...this.customerList, ...processedData];
          }

          this.hasMore = newData.length === this.pageSize;
          this.pageNo++;
        } else {
          const errorMessage = response.data.message || "加载失败";
          console.error("API返回错误:", errorMessage);
          uni.showToast({
            title: errorMessage,
            icon: "none",
          });
        }
      } catch (error) {
        console.error("加载成品库存数据失败:", error);
        let errorMessage = "网络错误";

        if (error.errMsg) {
          errorMessage = error.errMsg;
        } else if (error.data && error.data.message) {
          errorMessage = error.data.message;
        } else if (error.message) {
          errorMessage = error.message;
        }

        uni.showToast({
          title: errorMessage,
          icon: "none",
        });
      } finally {
        this.loading = false;
        if (isRefresh) {
          uni.stopPullDownRefresh();
        }
      }
    },

    refreshData() {
      this.loadInventoryData(true);
    },

    loadMore() {
      if (!this.hasMore || this.loading) return;
      this.loadInventoryData();
    },

    toggleExpand(itemId) {
      const index = this.expandedItems.indexOf(itemId);
      if (index > -1) {
        this.expandedItems.splice(index, 1);
      } else {
        this.expandedItems.push(itemId);
      }
    },

    toggleStatus(statusValue) {
      const index = this.selectedStatuses.indexOf(statusValue);
      if (index > -1) {
        this.selectedStatuses.splice(index, 1);
      } else {
        this.selectedStatuses.push(statusValue);
      }
    },

    resetFilter() {
      this.selectedStatuses = [];
      this.filterForm = {
        customerName: "",
        customerCode: "",
        orderNo: "",
        projectName: "",
        windowSeries: "",
        windowNo: "",
        warehouseName: "",
        locationName: "",
        onlyAvailable: false,
      };
    },

    applyFilter() {
      this.showFilterModal = false;
      this.refreshData();
    },

    calculateStatusClass(item) {
      if (item.stockStatus === 3) {
        return "status-frozen";
      } else if (item.stockStatus === 2) {
        return "status-reserved";
      } else if (!item.availableQuantity || item.availableQuantity <= 0) {
        return "status-out";
      }
      return "status-normal";
    },

    calculateStatusText(item) {
      if (item.stockStatus === 3) {
        return "冻结";
      } else if (item.stockStatus === 2) {
        return "预留";
      } else if (!item.availableQuantity || item.availableQuantity <= 0) {
        return "无库存";
      }
      return "正常";
    },

    formatQuantity(quantity) {
      if (!quantity) return "0";
      return parseFloat(quantity).toFixed(0);
    },

    toggleCustomer(customerId) {
      const index = this.expandedCustomers.indexOf(customerId);
      if (index > -1) {
        this.expandedCustomers.splice(index, 1);
      } else {
        this.expandedCustomers.push(customerId);
      }
    },

    toggleOrder(orderId) {
      const index = this.expandedOrders.indexOf(orderId);
      if (index > -1) {
        this.expandedOrders.splice(index, 1);
      } else {
        this.expandedOrders.push(orderId);
      }
    },

    toggleProduct(productKey) {
      const index = this.expandedProducts.indexOf(productKey);
      if (index > -1) {
        this.expandedProducts.splice(index, 1);
      } else {
        this.expandedProducts.push(productKey);
      }
    },

    toggleLocation(locationKey) {
      const index = this.expandedLocations.indexOf(locationKey);
      if (index > -1) {
        this.expandedLocations.splice(index, 1);
      } else {
        this.expandedLocations.push(locationKey);
      }
    },

    formatDate(dateStr) {
      if (!dateStr) return "-";
      const date = new Date(dateStr);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
        2,
        "0"
      )}-${String(date.getDate()).padStart(2, "0")}`;
    },

    openFilterModal() {
      this.showFilterModal = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.product-inventory {
  background: #f5f7fa;
  min-height: 100vh;
}

// 自定义导航栏样式
.nav-title {
  font-size: 36rpx;
  font-weight: 600;
  color: white;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 8rpx 16rpx;

  .filter-text {
    font-size: 28rpx;
    color: white;
  }
}

.inventory-list {
  padding: 24rpx;
}

// 客户分组样式
.customer-group {
  margin-bottom: 24rpx;
}

.customer-header {
  background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
  color: white;
  padding: 32rpx 24rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;

  &.expanded {
    border-radius: 16rpx 16rpx 0 0;
    box-shadow: 0 8rpx 24rpx rgba(82, 196, 26, 0.4);
  }

  .customer-info {
    flex: 1;

    .customer-name {
      font-size: 32rpx;
      font-weight: 600;
      margin-bottom: 8rpx;
    }

    .customer-stats {
      display: flex;
      gap: 24rpx;

      .stat-item {
        font-size: 26rpx;
        opacity: 0.9;
      }
    }
  }

  display: flex;
  align-items: center;
  justify-content: space-between;

  .expand-icon {
    width: 48rpx;
    height: 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: transform 0.3s ease;

    &.rotated {
      transform: rotate(180deg);
    }
  }
}

// 订单列表样式
.order-list {
  background: white;
  border-radius: 0 0 16rpx 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.order-group {
  border-bottom: 1rpx solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }
}

.order-header {
  padding: 24rpx;
  background: #fafafa;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;

  &.expanded {
    background: #f0f9ff;
  }

  .order-info {
    flex: 1;

    .order-no {
      font-size: 28rpx;
      font-weight: 600;
      color: #262626;
      margin-bottom: 4rpx;
    }

    .order-details {
      display: flex;
      gap: 16rpx;

      .project-name {
        font-size: 24rpx;
        color: #1890ff;
      }

      .inventory-count {
        font-size: 24rpx;
        color: #8c8c8c;
      }
    }
  }

  .order-quantity {
    display: flex;
    align-items: baseline;
    gap: 4rpx;
    margin-right: 16rpx;

    .quantity-value {
      font-size: 28rpx;
      font-weight: 600;
      color: #52c41a;
    }

    .quantity-unit {
      font-size: 24rpx;
      color: #8c8c8c;
    }
  }

  .expand-icon {
    width: 32rpx;
    height: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8c8c8c;
    transition: transform 0.3s ease;

    &.rotated {
      transform: rotate(180deg);
    }
  }
}

// 产品分组样式
.product-groups {
  background: white;
  padding: 16rpx;
}

.product-group {
  margin-bottom: 16rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  overflow: hidden;
  border-left: 4rpx solid #52c41a;

  &:last-child {
    margin-bottom: 0;
  }
}

.product-header {
  background: #f0f9ff;
  padding: 24rpx;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1rpx solid #e6f7ff;

  &.expanded {
    background: #e6f7ff;
    border-bottom-color: #bae7ff;
  }

  .product-info {
    flex: 1;

    .window-info {
      display: flex;
      align-items: center;
      gap: 12rpx;
      margin-bottom: 8rpx;

      .window-series {
        font-size: 28rpx;
        font-weight: 600;
        color: #262626;
      }

      .window-no {
        font-size: 26rpx;
        color: #1890ff;
        background: #f0f9ff;
        padding: 4rpx 8rpx;
        border-radius: 4rpx;
        border: 1rpx solid #d6f7ff;
      }
    }

    .product-details {
      display: flex;
      gap: 16rpx;

      .window-color {
        font-size: 24rpx;
        color: #8c8c8c;
      }

      .location-count {
        font-size: 24rpx;
        color: #52c41a;
      }
    }
  }

  .product-quantity {
    display: flex;
    align-items: baseline;
    gap: 4rpx;
    margin-right: 16rpx;

    .quantity-value {
      font-size: 28rpx;
      font-weight: 600;
      color: #52c41a;
    }

    .quantity-unit {
      font-size: 24rpx;
      color: #8c8c8c;
    }
  }

  .expand-icon {
    width: 32rpx;
    height: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1890ff;
    transition: transform 0.3s ease;

    &.rotated {
      transform: rotate(180deg);
    }
  }
}

// 库位分组样式
.location-groups {
  background: #f8f9fa;
  padding: 16rpx;
}

.location-group {
  margin-bottom: 16rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.location-header {
  background: #e6f7ff;
  padding: 20rpx;
  border-radius: 8rpx;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-left: 4rpx solid #1890ff;

  &.expanded {
    background: #bae7ff;
    border-radius: 8rpx 8rpx 0 0;
  }

  .location-info {
    flex: 1;

    .warehouse-info {
      display: flex;
      align-items: center;
      gap: 12rpx;
      margin-bottom: 8rpx;

      .warehouse-name {
        font-size: 26rpx;
        font-weight: 600;
        color: #1890ff;
      }

      .location-code {
        font-size: 24rpx;
        color: #595959;
        background: #f0f0f0;
        padding: 4rpx 8rpx;
        border-radius: 4rpx;
      }
    }

    .location-stats {
      display: flex;
      gap: 16rpx;

      .stat-item {
        font-size: 22rpx;
        color: #8c8c8c;
      }
    }
  }

  .expand-icon {
    width: 32rpx;
    height: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1890ff;
    transition: transform 0.3s ease;

    &.rotated {
      transform: rotate(180deg);
    }
  }
}

// 库存项列表样式
.inventory-items {
  background: white;
  border-radius: 0 0 8rpx 8rpx;
  padding: 16rpx;
}

.inventory-item {
  background: white;
  border-radius: 12rpx;
  margin-bottom: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;

  &:last-child {
    margin-bottom: 0;
  }

  &.expanded {
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  }
}

.item-header {
  padding: 32rpx 24rpx;
  position: relative;
  cursor: pointer;

  .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .primary-info {
    flex: 1;

    .warehouse-info {
      display: flex;
      align-items: center;
      gap: 12rpx;
      margin-bottom: 12rpx;

      .warehouse-name {
        background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
        color: white;
        padding: 6rpx 12rpx;
        border-radius: 16rpx;
        font-size: 22rpx;
        font-weight: 500;
      }

      .location-code {
        background: #f6ffed;
        color: #52c41a;
        padding: 6rpx 12rpx;
        border-radius: 16rpx;
        font-size: 22rpx;
        border: 1rpx solid #b7eb8f;
      }
    }

    .order-info {
      margin-bottom: 12rpx;

      .order-no {
        font-size: 32rpx;
        font-weight: 600;
        color: #262626;
        margin-bottom: 4rpx;
      }

      .customer-name {
        font-size: 26rpx;
        color: #52c41a;
        font-weight: 500;
      }
    }

    .project-info {
      margin-bottom: 12rpx;

      .project-name {
        font-size: 28rpx;
        font-weight: 500;
        color: #1890ff;
        margin-bottom: 4rpx;
      }

      .window-info {
        font-size: 26rpx;
        color: #8c8c8c;
      }
    }

    .window-info {
      margin-bottom: 12rpx;

      .window-series {
        font-size: 26rpx;
        font-weight: 600;
        color: #262626;
        margin-bottom: 4rpx;
      }

      .window-no {
        font-size: 24rpx;
        color: #8c8c8c;
      }
    }

    .quantity-info {
      display: flex;
      align-items: baseline;
      gap: 8rpx;

      .quantity-label {
        font-size: 24rpx;
        color: #8c8c8c;
      }

      .quantity-value {
        font-size: 28rpx;
        font-weight: 600;
        color: #52c41a;
      }

      .quantity-unit {
        font-size: 24rpx;
        color: #8c8c8c;
      }
    }
  }

  .expand-icon {
    width: 48rpx;
    height: 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8c8c8c;
    transition: transform 0.3s ease;

    &.rotated {
      transform: rotate(180deg);
    }
  }

  .status-indicator {
    position: absolute;
    top: 0;
    right: 0;
    width: 8rpx;
    height: 100%;

    &.status-normal {
      background: #52c41a;
    }

    &.status-reserved {
      background: #faad14;
    }

    &.status-frozen {
      background: #722ed1;
    }

    &.status-out {
      background: #ff4d4f;
    }
  }
}

.item-details {
  border-top: 1rpx solid #f0f0f0;
  padding: 32rpx 24rpx;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24rpx 32rpx;
  margin-bottom: 32rpx;
}

.detail-item {
  .label {
    display: block;
    font-size: 24rpx;
    color: #8c8c8c;
    margin-bottom: 8rpx;
  }

  .value {
    display: block;
    font-size: 28rpx;
    color: #262626;
    font-weight: 500;

    &.available {
      color: #52c41a;
    }

    &.reserved {
      color: #faad14;
    }

    &.total {
      color: #1890ff;
    }

    &.status-normal {
      color: #52c41a;
    }

    &.status-reserved {
      color: #faad14;
    }

    &.status-frozen {
      color: #722ed1;
    }

    &.status-out {
      color: #ff4d4f;
    }
  }
}

.load-more {
  padding: 32rpx;
  text-align: center;

  .load-text {
    color: #8c8c8c;
    font-size: 28rpx;
  }
}

.filter-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  z-index: 1000;
}

.filter-content {
  background: white;
  border-radius: 24rpx 24rpx 0 0;
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
}

.filter-header {
  padding: 32rpx 24rpx;
  border-bottom: 1rpx solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .filter-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #262626;
  }

  .close-btn {
    font-size: 48rpx;
    color: #8c8c8c;
    line-height: 1;
  }
}

.filter-body {
  padding: 32rpx 24rpx;
  max-height: 60vh;
  overflow-y: auto;
}

.filter-group {
  margin-bottom: 40rpx;

  .group-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #262626;
    margin-bottom: 20rpx;
  }
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.checkbox-item {
  padding: 16rpx 24rpx;
  background: #f8f9fa;
  border-radius: 32rpx;
  border: 2rpx solid transparent;
  transition: all 0.3s ease;

  &.checked {
    background: #f6ffed;
    border-color: #52c41a;
    color: #52c41a;
  }

  .checkbox-text {
    font-size: 26rpx;
  }
}

.filter-footer {
  padding: 24rpx;
  border-top: 1rpx solid #f0f0f0;
  display: flex;
  gap: 16rpx;
}

// 输入框组样式
.input-group {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.input-item {
  display: flex;
  flex-direction: column;
  gap: 12rpx;

  .input-label {
    font-size: 26rpx;
    color: #262626;
    font-weight: 500;
  }

  .filter-input {
    height: 72rpx;
    background: #f8f9fa;
    border-radius: 8rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
    border: 2rpx solid transparent;
    transition: all 0.3s ease;

    &:focus {
      background: white;
      border-color: #52c41a;
    }
  }
}

.filter-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-weight: 500;

  &.reset {
    background: #f0f2f5;
    color: #595959;
  }

  &.confirm {
    background: #52c41a;
    color: white;
  }
}
</style>
